<template>
	<view class="content">
		<view class="top-bg"></view>
		<view class="content-container">
			<view class="tite-text">快速注册</view>
			<view class="choose-register">
				<view :class="registerType ? 'active-register' : ''">邮箱注册</view>
				<!-- <view :class="!registerType ? 'active-register' : ''">手机注册</view> -->
			</view>
			<view class="register-form">
				<view class="form-line" v-if="registerType">
					<view class="iconfont icon-youjian"></view>
					<view class="vertical-bar iconfont icon-anjianfengexian"></view>
					<input type="text" placeholder="请输入电子邮箱" v-model="emaile"/>
				</view>
				<view class="form-line" v-else>
					<view class="iconfont icon-shouji"></view>
					<view class="vertical-bar iconfont icon-anjianfengexian"></view>
					<input type="text" placeholder="请输入手机号"/>
				</view>
				<view class="form-line">
					<view class="iconfont icon-mima"></view>
					<view class="vertical-bar iconfont icon-anjianfengexian"></view>
					<input type="password" placeholder="请输入密码" v-model="password"/>
				</view>
				<view class="form-line">
					<view class="iconfont icon-mima"></view>
					<view class="vertical-bar iconfont icon-anjianfengexian"></view>
					<input type="password" placeholder="请再次输入密码" v-model="rePassword"/>
				</view>
				<view class="verification-block">
					<view class="form-line">
						<view class="iconfont icon-yanzhengma"></view>
						<view class="vertical-bar iconfont icon-anjianfengexian"></view>
						<input type="text" placeholder="请输入验证码" v-model="authCode"/>
					</view>
					<view class="send-verification" @click="sendAuthCode">{{sendAuthText}}</view>
				</view>
			</view>
			<view class="register-login-btn" @click="registerLogin">快速注册</view>
		</view>
		<view class="bottom-bg"></view>
		<view class="agreement flex-ali-baseline">
			<checkbox-group @change="changeAgreement">
				<checkbox value="1" class="agreement-checkbox" />
			</checkbox-group>
			<view>
				我已阅读并同意<text @click="useAgreement" class="link-text-color">《趣校园用户使用协议》</text>及<text @click="serviceAgreement" class="link-text-color">《趣校园用户服务协议》</text>
			</view>
		</view>
		<mpopup ref="mpopup" :isdistance="true"></mpopup>  
	</view>
</template>

<script>
	import {User} from '@/model/user.js';
	import mpopup from '@/components/xuan-popup/xuan-popup.vue'
	export default {
		data() {
			return {
				registerType: true,
				isRead: false,
				emaile:  "",
				password:'',
				rePassword:"",
				authCode:"",
				reg : /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/,
				isRefreshAuthCode: false,
				sendAuthText : '发送验证码',
				isSend: false
			}
		},
		components:{
			mpopup
		},
		methods: {
			changeAgreement(e){
				// TODO 监听复选框发生改变
				if(e.detail.value.length > 0){
					this.isRead = true;
					return
				}
				this.isRead = false
			},
			useAgreement(){
				
			},
			serviceAgreement(){
				
			},
			async sendAuthCode(){
				if(this.isSend){
					return
				}
				if(!this.emaile || !this.reg.test(this.emaile)){
					uni.showToast({
						icon:"none",
						title:"请输入有效的电子邮箱"
					})
					return
				}
				this.isSend = true
				let time = 60
				let timmer = setInterval(()=>{
					this.sendAuthText = time + 's'
					time -= 1
					if(time <= 0){
						clearInterval(timmer)
						this.sendAuthText = '发送验证码'
						this.isSend = false
					}
				},1000)
				if(!this.isRefreshAuthCode){
					let res = await User.getAuthCode({email:this.emaile})
					this.isRefreshAuthCode = true
					return
				}
				let res = await User.refreshAuthCode({email:this.emaile,codeKey:this.emaile})
			},
			async registerLogin(){
				if(!this.isRead){
					uni.showToast({
						icon:'none',
					    title: '请详细阅读并勾选服务及使用协议',
					    duration: 2000
					});
					return
				}
				if(this.loginParameterValidation()){
					let res = await User.register({
						email:this.emaile,
						password:this.$sha1(this.password),
						rePassword:this.$sha1(this.rePassword),
						authCode:this.authCode})
					if(res.code != 200){
						uni.showToast({
							icon:"none",
							title:res.message
						})
						return
					}
					this.$refs.mpopup.open({
						type:'success',
						content:'注册成功',
						timeout:1000,
						isClick:false
					});
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						},1500)
					})
				}
			},
			loginParameterValidation(){
				if(this.emaile && this.password && this.rePassword && this.authCode && this.password == this.rePassword){
					return true
				}
				return false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.top-bg{
			width: 100%;
			height: 500rpx;
			background-image: url('../../static/imgs/register/login-top.png');
			background-repeat: no-repeat;
			background-size: cover;
		}
		.bottom-bg{
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 500rpx;
			background-image: url('../../static/imgs/register/login-bottom.png');
			background-repeat: no-repeat;
			background-size: cover;
		}
		.content-container{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-60%);
			z-index: 10;
			width: 80vw;
			height: 950rpx;
			background: #FFFFFF;
			box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.16);
			opacity: 1;
			border-radius: 10px;
			.tite-text{
				margin: 40rpx auto;
				text-align: center;
				font-size: 35rpx;
				font-weight: bold;
				color: #888888;
			}
			.choose-register{
				display: flex;
				justify-content: space-around;
				font-size: 30rpx;
				font-weight: bold;
				color: #888888;
			}
			.active-register{
				color: $fun-theme-color;
				&::after{
					content: '';
					display: block;
					border: 4rpx $fun-theme-color solid;
					border-radius: 4rpx;
				}
			}
		}
		.register-form{
			.form-line{
				margin: 60rpx auto;
				box-sizing: border-box;
				width: 500rpx;
				height: 80rpx;
				background: #F2F2F2;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				input{
					font-size: 26rpx;
					flex: 1;
				}
			}
			.verification-block{
				display: flex;
				box-sizing: border-box;
				align-items: center;
				margin: 60rpx auto;
				width: 500rpx;
				height: 80rpx;
				.send-verification{
					margin: 0 0 0 20rpx;
					width: 350rpx;
					height: 80rpx;
					color: #FFFFFF;
					line-height: 80rpx;
					text-align: center;
					background: #FFEB3B;
					border-radius: 10px;
				}
			}
		}
		.register-login-btn{
			width: 400rpx;
			height: 80rpx;
			background: #FFEB3B;
			border-radius: 10px;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
			margin: 0 auto;
		}
		.agreement{
			checkbox-group{
				display: inline-block;
				width: 50rpx;
			}
			font-size: 20rpx;
			position: fixed;
			bottom: 10rpx;
			left: 10rpx;
			.agreement-checkbox{
				transform:scale(0.5);
			}
		}
	}
</style>
